﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Rx Autocomplete</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
    
    <link href="autocomplete.css" rel="stylesheet" />
    <script src="autocomplete.js"></script>
    <script src="../../lib/RxJS/rx.js"></script>
    <script src="../../lib/RxJS/rx.time.js"></script>
    <script src="../../lib/RxJS/rx.winjs.js"></script>
</head>
<body>
    <div class="autocomplete fragment">
        <header aria-label="Header content" role="banner">
            <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Autocomplete Example</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div class="explanation">
                This example overrides codeShow's search charm to illustrate how the autocomplete behavior can be used to provide suggestions for the search contract. When you leave this page, normal search functionality will be restored.
            </div>
            <div id="suggestItemTemplate" data-win-control="WinJS.Binding.Template">
                <div class="resultItem">
                    <div data-win-bind="innerText: text"></div>
                </div>
            </div>

            <p>Start typing for suggestions...</p>
            <div class="suggestions">              
                <input id="rxInput" type="text" />
            </div>
            
            <div id="results" class="suggestions"
                 data-win-control="WinJS.UI.ListView"
                 data-win-options="{ 
	itemTemplate: select('#suggestItemTemplate'),
	selectionMode: 'none'
}">
            </div>
        </section>
    </div>
</body>
</html>
